import { useRouter } from 'next/router';
import { teacher } from '@/datas/member';
import Carousel from '@/components/common/Carousel'

const imageSrc = ['/images/index/top1.jpg', '/images/index/top2.jpg', '/images/index/top3.png'];

function TeacherDetail() {
    const router = useRouter();
    const { id } = router.query;
    const teacherData = teacher[parseInt(id)] || teacher[0];

    return (
        <div className="grid place-items-center w-full pb-48">
                  <Carousel urls={imageSrc} />
            <div className="max-w-5xl w-full px-12 text-left flex-col pt-10">
                {/* 教师基本信息区域 */}
                <div className="card card-side bg-base-100 shadow-xl border-2 border-solid p-10 mb-10">
                    <figure style={{ flex: 1 }}>
                        <img
                            src={teacherData.profilePic}
                            alt="teacher"
                            className="rounded-xl"
                        />
                    </figure>
                    <div className="card-body" style={{ flex: 3 }}>
                        <h2 className="card-title text-2xl">教員：{teacherData.name}</h2>
                        <p className="text-lg">{teacherData.text}</p>
                    </div>
                </div>

                {/* 分类区域 A */}
                <div className="mb-10">
                    <h2 className="text-xl font-bold mb-4">研究キーワード</h2>
                    <div className="divider"></div>
                    <p className="text-gray-700">便益評価 政策評価 経済均衡モデル</p>
                </div>

                {/* 分类区域 B */}
                <div className="mb-10">
                    <h2 className="text-xl font-bold mb-4">教育经历</h2>
                    <div className="divider"></div>
                    <ul className="list-disc list-inside space-y-2">
                        <li>　　</li>
                        <li>　　</li>
                        <li>1996-1999 早稲田大学</li>
                    </ul>
                </div>

                {/* 分类区域 C */}
                <div className="mb-10">
                    <h2 className="text-xl font-bold mb-4">研究成果</h2>
                    <div className="divider"></div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="card bg-base-100 shadow-md">
                            <div className="card-body">
                                <h3 className="card-title">研究テーマ</h3>
                                <p>環境政策評価モデルの構築、空間的応用一般均衡(SCGE)分析における交通サービス生産と交通行動のモデル化に関する研究、交通・立地統合モデルの開発、地域環境資源保全策の検討</p>
                            </div>
                        </div>
                        <div className="card bg-base-100 shadow-md">
                            <div className="card-body">
                                <h3 className="card-title">共同研究・競争的資金等の研究</h3>
                                <p>市町村間産業連関表の構築と人口減少時代における交通インフラ整備の効果分析、地域経済活性化策評価のための一般均衡CUEモデルの開発</p>
                            </div>
                        </div>
                    </div>
                </div>

                {/* 分类区域 D */}
                <div className="mb-10">
                    <h2 className="text-xl font-bold mb-4">論文</h2>
                    <div className="divider"></div>
                    <ul className="list-disc list-inside space-y-2">
                        <li>航空・空港市場への影響を考慮したリニア中央新幹線整備の計量厚生分析</li>
                        <li>市町村間CGEモデルの開発とリニア中央新幹線アクセス交通整備の計量厚生分析 </li>
                        <li>橋梁劣化予測に基づく将来維持修繕費用推計とその低減施策の検討</li>
                    </ul>
                </div>

                {/* 分类区域 E */}
                <div className="mb-10">
                    <h2 className="text-xl font-bold mb-4">書籍等出版物</h2>
                    <div className="divider"></div>
                    <ul className="list-disc list-inside space-y-2">
                        <li>交通政策の空間的応用一般均衡分析　―インフラ・料金・環境政策評価― </li>
                        <li>脱炭素社会に向けた都市交通政策の展開  </li>
                        <li>橋梁劣化予測に基づく将来維持修繕費用推計とその低減施策の検討</li>
                    </ul>
                </div>
                
            </div>
        </div>
    );
}

export default TeacherDetail;